<template>
  <div id="app">
    <baidu-map
        class="map"
        @ready="onReady"
        :center="{ lng: 116.404, lat: 39.915 }"
        :zoom="15"
        :scroll-wheel-zoom="true"
    >
      <!-- 在地图右下角加入缩略图控件 -->
      <bm-overview-map
          anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
          :isOpen="true"
      ></bm-overview-map>
      <!-- 获取城市列表 -->
      <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
      <bm-marker :position="{ lng: 116.38, lat: 39.92 }"> </bm-marker>
      <bm-marker :position="{ lng: 116.38, lat: 39.915 }"> </bm-marker>
      <bm-marker
          :position="{ lng: 116.38, lat: 39.91 }"
          :dragging="true"
          animation="BMAP_ANIMATION_BOUNCE"
          :icon="{
          url: 'http://developer.baidu.com/map/jsdemo/img/fox.gif',
          size: { width: 300, height: 157 },
        }"
      >
      </bm-marker>
      <!-- 海量点需要zoom小于10 -->
      <bm-point-collection
          :points="points"
          shape="BMAP_POINT_SHAPE_STAR"
          color="red"
          size="BMAP_POINT_SIZE_BIG"
          @click="clickHandler"
      ></bm-point-collection>
      <bm-circle
          :center="{
          lng: 116.404,
          lat: 39.915,
        }"
          :radius="500"
          stroke-color="blue"
          :stroke-opacity="0.5"
          :stroke-weight="2"
          @lineupdate="updateCirclePath"
          :editing="false"
          fillColor="pink"
          :fillOpacity="1"
          @click="onCircle"
      ></bm-circle>
      <bm-label
          content="我爱北京天安门"
          :position="{ lng: 116.404, lat: 39.915 }"
          :labelStyle="{
          color: '#fff',
          fontSize: '18px',
          backgroundColor: 'rgba(0,0,0,0)',
          borderColor: 'rgba(0,0,0,0)',
        }"
          :offset="{ width: -3.5 * 18, height: -18 / 2 }"
          title="Hover me"
      />
      <bm-info-window
          :position="{ lng: 116.404, lat: 39.915 }"
          title="Info Window Title"
          :show="true"
      >
        <p>你好哈哈哈</p>
        <button>Clear</button>
      </bm-info-window>
      <bm-label
          content="<div>我爱北京天安门<div class='content_text'>我爱北京天安门</div>我爱北京天安门</div>"
          :position="{ lng: 116.424, lat: 39.915 }"
          :labelStyle="{
          color: '#fff',
          fontSize: '18px',
          backgroundColor: 'red',
          borderColor: 'rgba(0,0,0,0)',
          width: '200px',
          height: '200px',
          borderRadius: '50%',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          flexWrap: 'wrap',
          margin: '-100px 0 0 -100px',
          boxShadow: '0 0 10px 0 black',
        }"
          title="完美解法"
      />
      <bm-label
          content="<div>我爱北京天安门<div class='content_text'>我爱北京天安门</div>我爱北京天安门</div>"
          :position="{ lng: 116.434, lat: 39.915 }"
          :labelStyle="{
          color: '#fff',
          fontSize: '18px',
          backgroundColor: 'red',
          borderColor: 'rgba(0,0,0,0)',
          width: '200px',
          height: '200px',
          borderRadius: '50%',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          flexWrap: 'wrap',
          margin: '-100px 0 0 -100px',
          boxShadow: '0 0 10px 0 black',
        }"
          title="完美解法"
      />
    </baidu-map>
  </div>
</template>

<script>
export default {
  name: "APP",
  data() {
    return {
      points: [],
    };
  },
  methods: {
    onCircle() {
      console.log(888);
    },
    updateCirclePath(e) {
      console.log(e, 88);
    },
    clickHandler(e) {
      alert(`单击点的坐标为：${e.point.lng}, ${e.point.lat}`);
    },
    onReady() {
      const points = [];
      for (var i = 0; i < 1000; i++) {
        const position = {
          lng: Math.random() * 40 + 85,
          lat: Math.random() * 30 + 21,
        };
        points.push(position);
      }
      this.points = points;
    },
  },
  mounted() {},
};
</script>

<style>
.map {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.content_text {
  padding: 20px 0 2px;
}
</style>